<template>
  <el-drawer :show-close="false" :wrapperClosable="false" :title="drawerTitle" :size="drawerSize" :visible.sync="showDrawer" :direction="direction">
    <div :style="[{width:drawerSize}]" class="drawer__content">
      <slot name="ivDrawercontent"></slot>
      <div class="drawer_operation_top cenBet">
        <el-input-number style=" width:80%;" @change="drawerSizeChane" v-model="drawerSizeNum" controls-position="right" :min="100" :step="100" :max="1400"></el-input-number>
        <el-button style=" width:20%;" @click="closeDrawer()" icon="el-icon-close" plain>关闭</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
export default {
  name: "ivDrawer",
  props: {
    drawerTitle: {
      type: String,
      default: () => ""
    },
    showDrawer: {
      type: Boolean,
      default: () => false
    },
    direction: {
      type: String,
      default: () => "rtl"
    }
  },
  data() {
    return {
      drawerSize: "500px",
      drawerSizeNum: 500
    };
  },
  methods: {
    drawerSizeChane() {
      this.drawerSize = `${this.drawerSizeNum}px`;
    },
    closeDrawer() {
      this.$emit("closeDrawer");
    }
  }
};
</script>

<style>
.drawer__content {
  /* border: 1px solid red; */
  padding-bottom: 96px;
  height: 100%;
  position: fixed;
  overflow-y: auto;
}

.drawer_operation_top {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
}
</style>
